<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="jsonc" type="home">
{
"style": {
// 'custom' 表示开启自定义导航栏，默认 'default'
"navigationStyle": "custom",
"navigationBarTitleText": "解压小程序"
}
}
</route>

<script lang="ts" setup>
defineOptions({
  name: 'Home',
})

interface SafeAreaInsets {
  top: number
  right: number
  bottom: number
  left: number
}

// 获取屏幕边界到安全区域距离
let safeAreaInsets: SafeAreaInsets | null
let systemInfo: any

// #ifdef MP-WEIXIN
// 微信小程序使用新的API
systemInfo = uni.getWindowInfo()
safeAreaInsets = systemInfo.safeArea
  ? {
      top: systemInfo.safeArea.top,
      right: systemInfo.windowWidth - systemInfo.safeArea.right,
      bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
      left: systemInfo.safeArea.left,
    }
  : null
// #endif

// #ifndef MP-WEIXIN
// 其他平台继续使用uni API
systemInfo = uni.getSystemInfoSync()
safeAreaInsets = systemInfo.safeAreaInsets || null
// #endif

// 解压分类配置
const relaxCategories = [
  {
    id: 'image',
    title: '美图解压',
    desc: '欣赏美丽的图片，放松心情',
    icon: 'i-mdi-image-multiple',
    color: '#ff6b6b',
    gradient: 'linear-gradient(135deg, #ff6b6b 0%, #ff8e88 100%)',
    path: '/pages/relax/image/index',
  },
  {
    id: 'music',
    title: '音乐放松',
    desc: '聆听舒缓音乐，缓解压力',
    icon: 'i-mdi-music-note',
    color: '#4ecdc4',
    gradient: 'linear-gradient(135deg, #4ecdc4 0%, #44e6db 100%)',
    path: '/pages/relax/music/index',
  },
  {
    id: 'video',
    title: '视频减压',
    desc: '观看治愈视频，愉悦身心',
    icon: 'i-mdi-video',
    color: '#45b7d1',
    gradient: 'linear-gradient(135deg, #45b7d1 0%, #5ac8ed 100%)',
    path: '/pages/relax/video/index',
  },
  {
    id: 'game',
    title: '小游戏',
    desc: '简单游戏，轻松娱乐',
    icon: 'i-mdi-gamepad-variant',
    color: '#f39c12',
    gradient: 'linear-gradient(135deg, #f39c12 0%, #f5b041 100%)',
    path: '/pages/relax/game/index',
  },
]

// 导航到分类页面
function navigateToCategory(category: typeof relaxCategories[0]) {
  uni.navigateTo({
    url: category.path,
  })
}

// 获取当前时间的问候语
function getGreeting() {
  const hour = new Date().getHours()
  if (hour < 6)
    return '夜深了'
  if (hour < 9)
    return '早上好'
  if (hour < 12)
    return '上午好'
  if (hour < 14)
    return '中午好'
  if (hour < 17)
    return '下午好'
  if (hour < 19)
    return '傍晚好'
  return '晚上好'
}

onLoad(() => {
})
</script>

<template>
  <view class="home-container" :style="{ paddingTop: `${safeAreaInsets?.top || 0}px` }">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-title">
        解压小程序
      </view>
    </view>

    <!-- 欢迎区域 -->
    <view class="welcome-section">
      <view class="greeting">
        {{ getGreeting() }}
      </view>
      <view class="subtitle">
        选择你喜欢的解压方式
      </view>
    </view>

    <!-- 分类卡片区域 -->
    <view class="categories-section">
      <view
        v-for="category in relaxCategories"
        :key="category.id"
        class="category-card"
        @click="navigateToCategory(category)"
      >
        <view class="card-background" :style="{ background: category.gradient }">
          <view :class="category.icon" class="card-icon" />
          <view class="card-content">
            <view class="card-title">
              {{ category.title }}
            </view>
            <view class="card-desc">
              {{ category.desc }}
            </view>
          </view>
          <view class="card-arrow">
            →
          </view>
        </view>
      </view>
    </view>

    <!-- 底部说明 -->
    <view class="footer-section">
      <view class="footer-text">
        让生活更轻松，让心情更美好
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.home-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}

// 自定义导航栏
.custom-navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88rpx;
  padding: 0 30rpx;
}

.navbar-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

// 欢迎区域
.welcome-section {
  text-align: center;
  padding: 60rpx 30rpx;
}

.greeting {
  font-size: 48rpx;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16rpx;
  text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}

.subtitle {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.2);
}

// 分类卡片区域
.categories-section {
  padding: 20rpx 30rpx;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.category-card {
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.98);
    box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.2);
  }
}

.card-background {
  display: flex;
  align-items: center;
  padding: 40rpx;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10rpx);
    z-index: 0;
  }
}

.card-icon {
  font-size: 64rpx;
  margin-right: 32rpx;
  z-index: 1;
  position: relative;
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.card-content {
  flex: 1;
  z-index: 1;
  position: relative;
}

.card-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8rpx;
  text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.2);
}

.card-desc {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
}

.card-arrow {
  font-size: 32rpx;
  color: #fff;
  margin-left: 20rpx;
  z-index: 1;
  position: relative;
  transform: translateX(0);
  transition: transform 0.2s ease;
}

.category-card:active .card-arrow {
  transform: translateX(10rpx);
}

// 底部说明
.footer-section {
  text-align: center;
  padding: 60rpx 30rpx 40rpx;
  margin-top: auto;
}

.footer-text {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
}

// 响应式适配
@media screen and (min-width: 768rpx) {
  .categories-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24rpx;
  }
}
</style>
